<!DOCTYPE html>
<html style="font-size: 100px;">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
		<title>念念不忘 必有回响</title>
		<link rel="stylesheet" href="../static/common.css">
	</head>
	<style type="text/css">


	</style>
	<body>
		<!-- 创建星空背景画布 -->
		<canvas id="starfield"></canvas>
		<!-- 标题 -->
		<div class="title">念念不忘 必有回响</div>
		<!--  -->
		<div class="main" id="main_1" style="display: block;" >
			
			<form action ="select" method = "POST" name="cx">
				<span class="span_1" >查留言</span>
				<input type="text" name="name" id="ooo" value=""  onkeyup="pd()" placeholder="请输入你的名字查看留言" />
				<hr >
				<input id="button_1" type="submit"disabled="true" class="btn_1" />
			</form>


				{% for row in rows %}
				<div class="data" id="data_1">
				 	<span class="span_2">留言</span>
					<span class="text_data" id="text_data">{{row["text"]}}</span>
				</div>
				{% else %}
				<div class="data" id="data_1">
				 	<span class="span_2">留言</span>
					<span class="text_data" id="text_data">暂时没人给你留言~~</span>
				</div>
				{% endfor %}




		</div>
		<form action="add" method="POST">
		<div class="main"id="main_2" style="display: none;">
			<div class="hr_div" style="border-bottom: 1px solid #939393;padding-bottom:10px ;">
				<span class="span_1">留言暗号</span>
				<input type="text" name="name" id="key" value="" placeholder="姓名 暗号 特别的数字" />
		
			</div>
			<span class="span_1" style="margin-top: 10px;display: inline-block;width: 60px;">留言内容</span>
			<textarea class="text" name="text"  placeholder="把你想说的秘密全都留在这吧"></textarea>
				<input type="submit" class="btn_1" value="发送给Ta" />
			</div>
		
		</div>
		</form>
		<div class="footer" style="font-size: 16px">
			<ul>
				<li onclick="changeimg1()"><img id="img_1" src="../static/03.png" ></li>
				<li onclick="changeimg2()"><img id="img_2" src="../static/01.png" ></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
	
	btn_1 =document.getElementById('button_1')
		function pd(){
			if(document.cx.name.value!=""){
				btn_1.disabled=false
			}
		}
	</script>
	<!-- 自制路由哈哈哈哈哈哈 -->
	<script type="text/javascript">
		var arr=["../static/01.png","../static/02.png","../static/03.png","../static/04.png"]
		var img1 =document.querySelectorAll("img")[0]
		var img2 =document.querySelectorAll("img")[1]
		var main01=document.getElementById("main_1")
		var main02=document.getElementById("main_2")
		function changeimg1(){
			img1.src=arr[2]
			img2.src=arr[0]
			main01.style.display="block"
			main02.style.display="none"
		}
		function changeimg2(){
			img1.src=arr[3]
			img2.src=arr[1]
			main01.style.display="none"
			main02.style.display="block"
		}
	</script>

	<!-- 画星星背景 -->
	<script type="text/javascript">
		var canvas;
		var stars_count;
		var stars;
		ini();
		makeStars();
		var interval=setInterval(function(){drawStars();},50);//定时刷新星星数据

		function ini(){//初始化
		    canvas = document.getElementById("starfield");
		    canvas.width = window.innerWidth;
		    canvas.height = window.innerHeight;
		    context = canvas.getContext("2d");
		    stars = Array();//数组存放随机生成的星星数据（x,y,大小，颜色，速度）
		    stars_count = 500;//星星数量
		    clearInterval(interval);
		}

		function makeStars(){//随机生成星星数据
		    for(var i=0;i<stars_count;i++)
		    {
		        let x=Math.random() * canvas.offsetWidth;
		        let y = Math.random() * canvas.offsetHeight;
		        let radius = Math.random()*0.8;
		        let color="rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+",0.8)";
		        let speed=Math.random()*0.5;
		        let arr={'x':x,'y':y,'radius':radius,'color':color,'speed':speed};//（x,y,大小，颜色，速度）
		        stars.push(arr);//随机生成的星星数据存在这里
		    }
		}

		function drawStars(){//把星星画到画布上
		    context.fillStyle = "#000000";
		    context.fillRect(0,0,canvas.width,canvas.height);
		    for (var i = 0; i < stars.length; i++) {
		        var x = stars[i]['x'] - stars[i]['speed'];
		        if(x<-2*stars[i]['radius']) x=canvas.width;
		        stars[i]['x']=x;
		        var y = stars[i]['y'];
		        var radius = stars[i]['radius'];
		        context.beginPath();
		        context.arc(x, y, radius*2, 0, 2*Math.PI);
		        context.fillStyle = "rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+",0.8)";
		        context.fill();
		    }
		}

		window.onresize = function(){//窗口大小发生变化时重新随机生成星星数据
		    ini();
		    makeStars();
		    interval=setInterval(function(){drawStars();},50);
		}

	</script>
</html>
